@layer global {
    .button-reset {
        padding: 0;
        border: none;
        outline: none;
        font: inherit;
        color: inherit;
        background: none;
    }

    .button {
        --text-color: #383838;
        --disabled-text-color: #858585;

        --bg-color-top: #fede9e;
        --bg-color-bottom: #fdc452;

        --bg-color-top-light: #fee7b7;
        --bg-color-bottom-light: #fdcd6b;

        --bg-color-top-dark: #fed585;
        --bg-color-bottom-dark: #fdbb39;

        padding: var(--space-xs) var(--space-m-l);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-color);
        text-decoration: none;
        font-weight: bold;
        border: none;
        outline: 0;
        border-radius: 5000px;
        background: linear-gradient(to bottom, var(--bg-color-top) 0%, var(--bg-color-bottom) 100%);
        cursor: pointer;

        &:hover, &:active, &:visited {
            /*
             * This is using `important` to override the `a:hover` declaration which
             * appears to have higher specificity than the `button:hover` declaration.
             */
            color: var(--text-color) !important;
        }

        img, svg {
            float: left;
            display: inline-block;
            margin-right: var(--space-2xs);
        }

        &:hover, &:focus, &.active {
            background: linear-gradient(to bottom, var(--bg-color-top-dark) 0%, var(--bg-color-bottom-dark) 100%);
            outline: 0;
        }

        &[disabled] {
            background: linear-gradient(to bottom, var(--bg-color-top-light) 0%, var(--bg-color-bottom-light) 100%);
            color: var(--disabled-text-color) !important;
            cursor: not-allowed;
        }
    }

    .button--tan {
        --bg-color-top: #e8e3c7;
        --bg-color-bottom: #d6cd99;

        --bg-color-top-light: #efecd9;
        --bg-color-bottom-light: #ddd6ab;

        --bg-color-top-dark: #e1dab5;
        --bg-color-bottom-dark: #cfc487;
    }

    .button--red {
        --bg-color-top: #ffb8b8;
        --bg-color-bottom: #f78888;

        --bg-color-top-light: #ffcccc;
        --bg-color-bottom-light: #f7adad;

        --bg-color-top-dark: #fab4b4;
        --bg-color-bottom-dark: #ed6b6b;
    }

    .button--small {
        padding: var(--space-2xs) var(--space-s);
    }

    .load-more-button {
        display: block;
        text-align: center;
        width: 100%;
        padding: var(--space-2xs);
        outline: 0;
        border: 0;
        background-color: light-dark(#dbd9cf, #202023);
        color: light-dark(#525252, #f9f7ec);

        &:hover, &:focus {
            background-color: light-dark(#c5c2b2, #26262b);
        }
    }
}
